<template>
	<div id="app">
		<!-- <env-com></env-com>
		<h1>app组件</h1> -->
		<!-- 路由提供的导航组件 router-link
		 -->
		<router-link to="/cart">cart</router-link>
		|
		<router-link to="/count">count计数器</router-link>
		|
		<router-link to="/discover">发现</router-link>
		|
		<router-link to="/friend">朋友</router-link>
		|
		<router-link to="/mine">我的</router-link>
		|
		<router-link to="/list">商品列表</router-link>
		<!-- |
		 <router-link to="/detail">商品详情</router-link> -->
		<button @click="jump">一个朴实无华的按钮</button>
		<router-view></router-view>
	</div>
</template>
<script>
	export default {
		methods: {
			jump() {
				//通過this.$router來調用编程式导航的方法

				//有这么些方法

				// console.log(this.$router)

				//push

				//1.可以直接往push传入一个字符串的路径

				// this.$router.push('/mine')

				//2.需要传递参数的情况
				//就是我们通过编程式导航push的时候,如果我们是 通过路径进行跳转的话 路由会直接忽略掉这个叫做 params的参数
				//如果我们需要传递params 那么我们需要通过name属性来进行跳转
				//this.$router.push({ name: "list", query: { title: "怀旧歌曲" }, params: { price: 998 } })
				// this.$router.push({ path: "/list", query: { title: "怀旧歌曲" }, params: { price: "998" } })

				//replace

				//replace和push用法是一摸一样 只是有一点区别 

				//历史记录栈 [/friend,/mine]	

				//就是replace是不会产生历史记录的, 比如上一个页面访问的是 /home 然后我们通过replace跳转到了/mine 

				//结果就是 /mine这个历史记录 会直接替换掉/home这个历史记录

				// this.$router.replace('/list')

				//go 定位到历史记录栈的某一个记录

				//假如历史记录就是一个数组 ["/bing","http://localhost:8080/#/discover/toplist","/firend","/mine","/list"]

				//以当前页面为准,当前记录就是0  左边就是负数 右边是正值 如果我们传入给go()里面的数字超过了历史记录栈的记录 那么就不会生效 默默的失败了 

				// this.$router.go(30)
				//back 返回上一层
				// this.$router.back()
				//foward 前进一层
				// this.$router.foward()
				// console.log(this.$router)
			}
		}
	}
</script>
